 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    <div id ="box1">这是一个ID选择器标签</div>
    <div class ="box2">这是一个class选择器标签</div>
    <div>普通的div标签</div>

    <button>点击按钮</button>
    <script>
      var element_id=  document.getElementById('box1');
      console.log(element_id);

      var element_class=document.getElementsByClassName('box2')[0];
      console.log(element_class);

      var element_tag=document.getElementsByTagName('div')[2];
      console.log(element_tag);

      element_id.innerHTML='修改ID选择器标签文本内容';
      element_class.innerHTML=1;

      element_tag.style.color='red'; 
      element_tag.style.fontSize='20px'; 
    // DOM属性绑定事件  
        var button_element=document.getElementsByTagName('button')[0];
        // console.log(button_element);

        // button_element.onclick=function(){
        //     alert('DOM属性按建触发')
        // }
        button_element.addEventListener('click',function(){
            alert('DOM属性按建触发');
        })
    </script>
 </body>
 </html>